<template>
  <div class="app-container">
	<!-- 头部导航搜索 -->
    <el-form label-width="80px">
      <div class="box">
        <div class="box_content">
          <el-form-item label="学期">
            <el-select v-model="semester_id" placeholder="全部">
              <el-option v-for="(item,index) in semesterList" :key="index" :label="item.semester_name" :value="item.unid" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="课程搜索">
            <el-select v-model="course_id" placeholder="全部">
              <el-option v-for="(item,index) in lessionList" :key="index" :label="item.lession_name" :value="item.unid" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="日期">
            <div class="block">
              <el-date-picker v-model="time" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </div>
          </el-form-item>
        </div>
        <div class="box_content">
          <div style="text-align: left;margin-bottom: 10px">
            <el-button type="primary" icon="el-icon-search" @click="queryBtn">查询</el-button>
            <el-button icon="el-icon-search" @click="rest">重置</el-button>
          </div>
        </div>
      </div>
    </el-form>
	<div class="bar">
	  <div class="typeBar" @click="barType(index)" :style="{'border-bottom':barBtn == index?'3px green solid':''}" v-for="(item,index) in queryType">{{item}}</div>
	</div>
	<el-button type="primary" v-show="barBtn == 0" style="margin-top: 15px;" @click="showAdd = true">新建学生档案</el-button>
	<table-data :studentList="studentList" :queryStudent="queryStudent" :semesterList="semesterList" :lessionList="lessionList"></table-data>
	<!-- 底部分页 -->
	<el-pagination
	    @size-change="handleSizeChange"
	    @current-change="handleCurrentChange"
	    :current-page="page"
	    :page-sizes="[10, 20, 30, 40]"
	    :page-size="limit"
	    layout="total, sizes, prev, pager, next, jumper"
	    :total="total">
	</el-pagination>
	<!-- 新建学生档案弹窗 -->
	<el-dialog title="新建学生档案" :visible.sync="showAdd" width="1500px">
		<add-students :semesterList="semesterList" :lessionList="lessionList" :queryStudent="queryStudent" :sturow="null"></add-students>
	</el-dialog>
  </div>
</template>

<script>
import tableData from './components/query/tableData.vue'
import addStudents from './components/add/addStudent.vue'
import {
    selectStudent,
    addStudent,
    delStudent,
	querySemesterData,
	queryLession,
	changeDate,
} from '@/api/studentRecruit.js'
import store from '../../store'
export default {
    name: 'Index',
    components: {
		tableData,
		addStudents
    },
    data() {
        return {
					showAdd:false, //新建学生档案弹窗
					queryType:['意向学员','正式学员'], //表格导航
					barBtn:0, //表格导航状态
					selection: [],
					semester_id:null, //学期ID
					course_id:null, //课程ID
					time:null, //开始-结束时间
					create_time:null, //开始时间
					end_time:null, //结束时间
					semesterList:[], //学期列表
					lessionList:[], //课程列表
					studentList:[], //学员列表
					page:1, //当前页
					limit:10, //每页条数
					total:0, //学员列表总共条数
					pagesize:0, //学员列表总共页数
        }
    },
	created() {
      this.querySemester()
			this.queryLessionList()
			this.queryStudent()
    },
    methods: {
		//学期列表
        async querySemester(){
			let resData = {}
			let data = await querySemesterData(resData)
			if(data.code == 200){
				this.semesterList = data.data
				console.log(this.semesterList);
			}
		},
		//课程列表
		async queryLessionList(){
			let resData = {}
			let data = await queryLession(resData)
			if(data.code == 200){
				this.lessionList = data.data.list
				console.log(this.lessionList);
			}
		},
		//副跟进人
		async queryTeacher(){
			
		},
		//头部条件查询按钮
		queryBtn(){
			this.page = 1
			this.limit = 10
			this.queryStudent()
		},
		//学员列表
		async queryStudent(){
			if(this.time){
				for (var i = 0; i < this.time.length; i++) {
					this.time[i] = changeDate(this.time[i])
				}
				console.log(this.time);
				this.create_time = this.time[0]
				this.end_time = this.time[1]
			}
			let resData = {
				page:this.page,
				limit:this.limit,
				semester_id:this.semester_id,
				course_id:this.course_id,
				create_time:this.create_time,
				end_time:this.end_time,
				is_official:0,
			}
			switch (this.barBtn){
				case 0:
				resData.is_official = 0
					break;
				case 1:
				resData.is_official = 1
					break;
				default:
					break;
			}
			let data = await selectStudent(resData)
			console.log('学员列表',data);
			if(data.code == 200){
				//条数
				this.total = data.data.total
				//页数
				this.pagesize = data.data.total_page
				this.studentList = data.data.list
			}
		},
		//分页
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.limit = val
			this.queryStudent()
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.page = val
			this.queryStudent()
		},
		//重置
		rest(){
			this.semester_id = null
			this.course_id = null
			this.time = null
			this.queryStudent()
		},
		//表格导航
		async barType(index){
			this.barBtn = index
			let resData = {
				page:1,
				limit:10,
			}
			//是否是正式学员0：非正式1：正式
			switch (index){
			  //正式学员
			  case 0:
			  resData.is_official = 0
			    break;
			  //非正式学员
			  case 1:
			  resData.is_official = 1
			    break;
			  default:
			    break;
			}
			let data = await selectStudent(resData)
			if(data.code == 200){
				//条数
				this.total = data.data.total
				//页数
				this.pagesize = data.data.total_page
				this.studentList = data.data.list
			}
		}
    }
}
</script>

<style scoped>
  .bar{
    display: flex;
    justify-content: space-between;
    width: 160px;
    flex-direction: row;
  
  }
  .typeBar{
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /*下拉框*/
  .select {
    flex-wrap: wrap;
  }
    
  .el-select .el-input {
    width: 130px;
  }
    
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
    
  .box {
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content: space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
    
  .box_content {
    flex: 30 200px;
  }
    
  /*//解决最后一行的问题*/
  .box:after {
    content: '';
    width: 30%;
  }
    
  .btn {
    margin-bottom: 15px;
  }
    
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
